<template>
  <div>
    <div style="margin-bottom: 16px; margin: 0 auto">
      <a-row>
        <a-col :span="24">
          <h1 style="text-align: center; color: #337ab7; font-size: 25px">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span
            ><span style="text-shadow: 0px 0px 4px grey"
              ><a href="javascript:;">{{ entercon }}</a></span
            >
          </h1>
        </a-col>
      </a-row>
      <v-nave></v-nave>
      <a-row type="flex" justify="center">
        <a-col :xs="23" :sm="23" :md="18" :lg="18" :xl="18">
          <a-input-search
            :placeholder="searchWords == '在这里输入关键字' ? searchWords : ''"
            :value="searchWords == '在这里输入关键字' ? '' : searchWords"
            enter-button="检索"
            style="height: 43px"
            @search="SearchAction"
            @change="SearchChange"
          >
            <a-select
              slot="addonBefore"
              :default-value="search_keys[0].id"
              style="width: 100px"
              @change="SearchQsFieldChange"
            >
              <a-select-option
                :value="field.id"
                v-for="(field, index) in search_keys"
                :key="index"
              >
                {{ field.name }}
              </a-select-option>
            </a-select>
          </a-input-search>
        </a-col>
        <!-- <a-col>
    <a-button type="primary" @click="showAdvancedSearchModal">
        高级检索
    </a-button>
</a-col> -->
      </a-row>
    </div>
    <div style="margin-top: 16px"></div>
    <!-- 初始化loading加载 -->
    <a-row type="flex" justify="space-around" align="middle" v-show="loading_over && !show_pagination">
      <a-col :span="4">
        <div style="margin-top:40px;margin-bottom:20px">
          <a-spin tip="Loading...">
            <div class="spin-content"></div>
          </a-spin>
        </div>
      </a-col>
    </a-row>
     <!-- 初始化loading加载 end -->
    <a-modal
      v-model="visible"
      title="高级检索"
      cancelText="返回"
      okText="检索"
      :footer="null"
      @ok="handleAdvancedSearchOk"
    >
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 17 }"
        @submit="handleSubmit"
      >
        <a-form-item label="书名">
          <a-input placeholder="书名" @change="fieldTitle" />
        </a-form-item>
        <a-form-item label="作者">
          <a-input placeholder="作者" @change="fieldAuthor" />
        </a-form-item>
        <a-form-item label="ISBN">
          <a-input placeholder="ISBN" @change="fieldISBN" />
        </a-form-item>
        <a-form-item label="出版社">
          <a-input placeholder="出版社" @change="fieldPublisher" />
        </a-form-item>
        <a-form-item label="起始年份" style="margin-bottom: 0">
          <a-row>
            <a-col :span="6">
              <a-switch
                checked-children="启用"
                un-checked-children="禁用"
                default-checked
                @change="LimitChange"
              />
            </a-col>
            <a-col :span="18">
              <vue-slider v-model="value" :enable-cross="false"></vue-slider>
              <a-form-item
                :style="{
                  display: 'inline-block',
                  width: 'calc(50% - 12px)',
                }"
              >
                <a-input-number
                  :default-value="0"
                  style="width: 100%"
                  :value="year_start"
                  :min="min"
                  :max="max"
                  @change="fieldYearStart"
                />
              </a-form-item>
              <span
                :style="{
                  display: 'inline-block',
                  width: '24px',
                  textAlign: 'center',
                }"
              >
                -
              </span>

              <a-form-item
                :style="{
                  display: 'inline-block',
                  width: 'calc(50% - 12px)',
                }"
              >
                <a-input-number
                  :default-value="0"
                  :min="min"
                  :max="max"
                  style="width: 100%"
                  :value="year_end"
                  @change="fieldYearEnd"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-divider dashed />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
          <a-space>
            <a-button type="danger" @click="visible = false"> 返回 </a-button>
            <a-button type="primary" html-type="submit"> 检索 </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import VNave from "../../../../components/common/searchnav";
export default {
  data() {
    return {
      spinning:false,
      //   search
      searchWords: "在这里输入关键字",
      value: [0, 100],
      yeararr: [1900, new Date().getFullYear()],
      // [{ fieldCode: "", fieldValue: "" }]
      min: 1900,
      max: new Date().getFullYear(),
      search_fields_adv: [],
      year_start: 1900,
      year_end: new Date().getFullYear(),
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      search_field_code: "",
      visible: false,
      entercon: "电子书检索",
      LimitChangeFlag: true,
    };
  },
  components: {
    VueSlider,
    VNave,
  },
  watch: {
    value(newVal) {
      this.year_start = parseInt(
        this.yeararr[0] + newVal[0] * ((new Date().getFullYear() - 1900) / 100)
      );
      this.year_end = parseInt(
        this.yeararr[1] -
          (100 - newVal[1]) * ((new Date().getFullYear() - 1900) / 100)
      );
    },
  },
  computed: {
    show_pagination() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_pagination;
    },
     loading_over() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .loading_over;
    },
    //   search
    search_keys() {
      return this.$store.state.Unified.books.fieldsAllow.searchKeys;
    },
    search_fields() {
      return this.$store.state.Unified.books.fieldsAllow.sortFields;
    },
  },
  mounted() {
    //this.searchWords = search_keyword;
    //  console.log(this.$store.state.Namedparent)
    //   this.$store.state.Namedparent.key == 0 ? (this.entercon ="统一检索")
    //           : this.$store.state.Namedparent.key == 1 ? (this.entercon ="检索纸书")
    //           : this.$store.state.Namedparent.key == 2 ? (this.entercon ="检索电子书")
    //           : (this.entercon ="检索电子期刊")
    //           console.log(this.$route.query.searchtitle)

    if (this.$route.query.searchtitle) {
      this.searchWords = this.$route.query.searchtitle;
    }
  },
  methods: {
    LimitChange(checked) {
      this.LimitChangeFlag = checked;
    },
    //   search start
    fieldTitle(event) {
      var title = event.target.value.trim();
      if (this.search_fields_adv.length == 0) {
        this.search_fields_adv.push({
          fieldCode: this.$store.state[this.$store.state.Namedparent.name].books
            .fieldsAllow.searchAdvCode.title,
          fieldValue: title,
        });
      } else {
        var len = this.search_fields_adv.length;
        var find = false;

        for (var i = 0; i < len; i++) {
          if (
            this.search_fields_adv[i].fieldCode ==
            this.$store.state[this.$store.state.Namedparent.name].books
              .fieldsAllow.searchAdvCode.title
          ) {
            this.search_fields_adv[i].fieldValue = title;
            if (title.length == 0) {
              this.search_fields_adv.splice(i, 1);
              len--;
            }
            find = true;
          }
        }
        if (!find) {
          this.search_fields_adv.push({
            fieldCode: this.$store.state[this.$store.state.Namedparent.name]
              .books.fieldsAllow.searchAdvCode.title,
            fieldValue: title,
          });
        }
      }
    },
    fieldAuthor(event) {
      var author = event.target.value;
      if (this.search_fields_adv.length == 0) {
        this.search_fields_adv.push({
          fieldCode: this.$store.state[this.$store.state.Namedparent.name].books
            .fieldsAllow.searchAdvCode.author,
          fieldValue: author,
        });
      } else {
        var len = this.search_fields_adv.length;
        var find = false;
        for (var i = 0; i < len; i++) {
          if (
            this.search_fields_adv[i].fieldCode ==
            this.$store.state[this.$store.state.Namedparent.name].books
              .fieldsAllow.searchAdvCode.author
          ) {
            this.search_fields_adv[i].fieldValue = author;
            if (author.length == 0) {
              this.search_fields_adv.splice(i, 1);
              len--;
            }
            find = true;
          }
        }
        if (!find) {
          this.search_fields_adv.push({
            fieldCode: this.$store.state[this.$store.state.Namedparent.name]
              .books.fieldsAllow.searchAdvCode.author,
            fieldValue: author,
          });
        }
      }
    },
    fieldPublisher(event) {
      var publisher = event.target.value;
      if (this.search_fields_adv.length == 0) {
        this.search_fields_adv.push({
          fieldCode: this.$store.state[this.$store.state.Namedparent.name].books
            .fieldsAllow.searchAdvCode.publisher,
          fieldValue: publisher,
        });
      } else {
        var len = this.search_fields_adv.length;
        var find = false;
        for (var i = 0; i < len; i++) {
          if (
            this.search_fields_adv[i].fieldCode ==
            this.$store.state[this.$store.state.Namedparent.name].books
              .fieldsAllow.searchAdvCode.publisher
          ) {
            this.search_fields_adv[i].fieldValue = publisher;
            if (publisher.length == 0) {
              this.search_fields_adv.splice(i, 1);
              len--;
            }
            find = true;
          }
        }
        if (!find) {
          this.search_fields_adv.push({
            fieldCode: this.$store.state[this.$store.state.Namedparent.name]
              .books.fieldsAllow.searchAdvCode.publisher,
            fieldValue: publisher,
          });
        }
      }
    },
    fieldISBN(event) {
      var isbn = event.target.value;
      if (this.search_fields_adv.length == 0) {
        this.search_fields_adv.push({
          fieldCode: this.$store.state[this.$store.state.Namedparent.name].books
            .fieldsAllow.searchAdvCode.isbn,
          fieldValue: isbn,
        });
      } else {
        var len = this.search_fields_adv.length;
        var find = false;
        for (var i = 0; i < len; i++) {
          if (
            this.search_fields_adv[i].fieldCode ==
            this.$store.state[this.$store.state.Namedparent.name].books
              .fieldsAllow.searchAdvCode.isbn
          ) {
            this.search_fields_adv[i].fieldValue = isbn;
            if (isbn.length == 0) {
              this.search_fields_adv.splice(i, 1);
              len--;
            }
            find = true;
          }
        }
        if (!find) {
          this.search_fields_adv.push({
            fieldCode: this.$store.state[this.$store.state.Namedparent.name]
              .books.fieldsAllow.searchAdvCode.isbn,
            fieldValue: isbn,
          });
        }
      }
    },
    fieldYearStart(year_start) {
      this.year_start = year_start;
    },
    fieldYearEnd(year_end) {
      this.year_end = year_end;
    },
    // 高级检索 搜索
    handleSubmit() {
      console.log(this.search_fields_adv)
      if ( this.search_fields_adv.length <= 0) {
          this.$message.error("请输入检索内容");
          return ;
      }
      if (this.year_start > 0 && this.year_end > 0 && this.LimitChangeFlag) {
        var limiter = [];
        if (this.year_start < this.year_end) {
          limiter = ["DT:" + this.year_start + "/" + this.year_end];
        } else {
          limiter = ["DT:" + this.year_end + "/" + this.year_start];
        }
        this.$store.commit(
          this.$store.state.Namedparent.name + "/UpdateQsLimiter",
          limiter
        );
        this.$store.state[
          this.$store.state.Namedparent.name
        ].books.qs.limiter = limiter;
      } else {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/UpdateQsLimiter",
          []
        );
      }
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      // 此处应该commit
      this.$store.commit(
        this.$store.state.Namedparent.name + "/UpdateQsSearchFieldListAdv",
        this.search_fields_adv
      );
      //   this.$store.state[this.$store.state.Namedparent.name].books.qs.searchWords[0].fieldList = this.search_fields_adv;
      this.$store.dispatch(
        this.$store.state.Namedparent.name + "/SearchGetBooks"
      );
     var search_keyword =  this.search_fields_adv.filter((item)=>{
        return item.fieldCode == '01'
      })
      this.searchWords = search_keyword[0].fieldValue;
       this.$router.push({
        path: "/EbookSearch",
        query: { searchtitle: search_keyword[0].fieldValue },
      });
      this.visible = false;
    },
    // 高级检索  显示
    showAdvancedSearchModal() {
      this.visible = true;
    },
    handleAdvancedSearchOk() {
      this.visible = false;
    },
    SearchQsFieldChange: function (search_field) {
      console.log(search_field)
      this.$store.commit("ebook/ChangeQsSearchField", search_field);
      this.search_field_code = search_field;
    },
    SearchChange(e) {
      const { value } = e.target;
      this.searchWords = value;
    },
    SearchAction: function (search_keyword) {
      search_keyword = this.searchWords;
      if (search_keyword == "" || search_keyword == "在这里输入关键字") {
        this.$message.error("请输入检索关键字");
        return;
      }
      this.$store.commit(this.$store.state.Namedparent.name + "/CLEAR_QS");
      this.$store.commit(
        this.$store.state.Namedparent.name + "/ChangeQsSearchField",
        this.search_field_code ?  this.search_field_code : '01'
      );
      this.$store.state[this.$store.state.Namedparent.name].loading_over = true;
      this.$store.commit(
        this.$store.state.Namedparent.name + "/UpdateQsSearchKeyWord",
        search_keyword,
        1
      );
      this.$store.dispatch(
        this.$store.state.Namedparent.name + "/SearchGetBooks"
      );
      this.$router.push({
        path: "/EbookSearch",
        query: { searchtitle: search_keyword },
      });
      //

      // this.$store.dispatch(getbooks);
      //console.log(this.$store)

      //   this.$router.push("/");
    },
    // search end
  },
};
</script>
<style scoped>
/deep/.ant-input{
  height: 43px;
}
/deep/.ant-btn{
  height: 43px;
}
</style>